﻿@using System.Diagnostics
@using Lari.Services.Data;
@model Role
@{
    var modules = ViewBag.AppModules as List<AppModule>;
}
@functions 
{
    string GetAccessCss(bool hasAccess)
    {
        return hasAccess ? "hasAccessTrue" : "hasAccessFalse";
    }
}
<div style="float:left">
    <strong>Role</strong>: @Model.Name
</div>

<div style="float:right">
    <a href="#" id="expand" class="expanded">Expand</a>&nbsp;&nbsp;<a href="#" id="collapse" class="collapsed">Collapse</a>
</div>
<div class="clear"></div>
<div class="doubleSpacer"></div>

@*<div id="accordion">
    @foreach (AppModule module in modules)
    {
        <h5>
            <a href="#">@module.Caption</a></h5>
        <div style="height: 200px;">
            @foreach (RoleAccess ra in Model.RoleAccesses)
            {
                if (ra.Access.AppModule.ID == module.ID)
                {
                <div style="border-bottom: 1px solid #aed0ea; padding-top: 2px; padding-bottom: 2px">
                    @if (ra.IsEnabled)
                    {
                        <img src="@Url.Content("~/image/right.png")" style="width:16px; height:16px;" />
                    }
                    else
                    {
                        <img src="@Url.Content("~/image/cross.png")" style="width:16px; height:16px;" />
                    }
                    @ra.Access.Name
                </div>        
                }

            }
        </div>
        
    }
</div>*@

<ul class="treeView" id="TreeView">
    @foreach (AppModule module in modules)
    {
        <li class="collapsed">
            <div style="float: left">
                @module.Caption
            </div>
            <ul>
                @foreach (RoleAccess ra in Model.RoleAccesses)
                {
                    if (ra.Access.AppModule.ID == module.ID)
                    {
                    <li>
                        <label class="@GetAccessCss(ra.IsEnabled)">@ra.Access.Name</label>
                    </li>
                    }
                }
            </ul>
        </li>  
            
            
    }
</ul>
<script type="text/javascript">
    Array.prototype.indexOf = IndexOf;

    //Toggles between two classes for an element
    function ToggleClass(element, firstClass, secondClass, event) {
        event.cancelBubble = true;

        var classes = element.className.split(" ");
        var firstClassIndex = classes.indexOf(firstClass);
        var secondClassIndex = classes.indexOf(secondClass);

        if (firstClassIndex == -1 && secondClassIndex == -1) {
            classes[classes.length] = firstClass;
        }
        else if (firstClassIndex != -1) {
            classes[firstClassIndex] = secondClass;
        }
        else {
            classes[secondClassIndex] = firstClass;
        }

        element.className = classes.join(" ");

    }

    //Finds the index of an item in an array
    function IndexOf(item) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == item) {
                return i;
            }
        }

        return -1;
    }
    function ToggleNodeStateHandler(event) {
        ToggleClass(this, "collapsed", "expanded", (event == null) ? window.event : event);
    }

    //Prevents the onclick event from bubbling up to parent elements
    function PreventBubbleHandler(event) {
        if (!event) event = window.event;
        event.cancelBubble = true;
    }

    //Adds the relevant onclick handlers for the nodes in the tree view
    function SetupTreeView(elementId) {

        var tree = document.getElementById(elementId);

        var treeElements = tree.getElementsByTagName("li");

        for (var i = 0; i < treeElements.length; i++) {
            if (treeElements[i].getElementsByTagName("ul").length > 0) {
                treeElements[i].onclick = ToggleNodeStateHandler;
                //alert("1");
            }
            else {
                treeElements[i].onclick = PreventBubbleHandler;
                //alert("2");
            }
        }
    }
    function ExpandTree(expand) 
    {
        var finalclass = "";
        if (expand) {
            finalclass = "expanded";  
        } else {
            finalclass = "collapsed";
        }
        
        $("#TreeView > li").each(function () {
            $(this).attr('class', finalclass);
        });
    }

    $(document).ready(function() {
        SetupTreeView('TreeView');

        $("#expand").click(function() {
            ExpandTree(true);
        });

        $("#collapse").click(function () {
            ExpandTree(false);
        });
    });
</script>
